<template>
	<div id="article">
		<!-- <div>
			<el-row class="wrapNav" v-for="(item,i) in articleList " :key="item.id">
				<el-col :span="24">
					<el-col :span="2" class="chooseNav">
						<h3>{{item.title}}</h3>
					</el-col>
					<el-col :span="22" class="listNav" :ref="item.radio">
						<el-radio-group v-model="itemRadio[i]" @change="radioCheck">
							<el-radio-button :label="itemList" v-for="(itemList,index) in item.list" :key="index"></el-radio-button>
						</el-radio-group>
					</el-col>
				</el-col>
			</el-row>
		</div> -->
		<busTitleList :busDataTitle="articleList" v-on:sendSelectRad="getSelectRad"></busTitleList>
		<div class="wrapDataList">
			<el-row justify="space-between" type="flex">
				<el-col :span="12" style="display: flex;" class="topHeader">
					<div>
						<el-radio-group v-model="selectData" fill="#ff6e19" @change="selectCheck">
							<el-radio-button label="媒体列表"></el-radio-button>
							<el-radio-button label="热门推荐"></el-radio-button>
							<el-radio-button label="收藏资源"></el-radio-button>
						</el-radio-group>
					</div>
					<span class="iconfont icon-gouwuchekong" @click="dialogTableVisible = true;zimshopCartdata()">
						<div class="zimshopCartTotal">
							<b>{{shopTableList != null?shopTableList.length:"0"}}</b>
						</div>
					</span>
					<el-dialog title="购物车" :visible.sync="dialogTableVisible" width="600px">
						<div id="shopShowModal">
							<el-table :data="shopTableList" style="width: 100%" :header-cell-style="{'background-color': '#f2f2f2','font-size': '16px','font-weight': 'bold','border-bottom':'1px #e0e0e0 solid'}">
								<el-table-column prop="orderCartResourceName" label="资源名称" width="180">
									<!--  :checked="item.checked?true:false" -->
									<template slot-scope="scope">
										<el-checkbox @change="handleCheckedCitiesChange" v-model="checkedCities" :label="scope.row.id">{{scope.row.orderCartResourceName}}</el-checkbox>
									</template>

								</el-table-column>
								<el-table-column prop="orderCartPrice" label="资源价格(元)" width="180" align="center">
								</el-table-column>
								<el-table-column prop="status" label="资源状态" align="center">
									正常
								</el-table-column>
								<el-table-column prop="" label="操作" align="center">
									<template slot-scope="scope">
										<i class="el-icon-circle-close" style="font-size: 20px;cursor: pointer;" @click="delSelectShop(scope.row.id,scope.$index)"></i>
									</template>
								</el-table-column>
							</el-table>
							<div class="bottom">
								<div>
									<el-checkbox class="checkAll" @change="handleCheckAllChange" :indeterminate="isIndeterminate" v-model="checkAll">全选</el-checkbox>
									<span class="total">总数量: <b>{{shopTotal}}</b></span>
									<span class="price">总价格: <b>{{shopPrice}}</b></span>
									<span class="place" @click="singleOrder('null')">立即下单</span>
								</div>
							</div>


						</div>
					</el-dialog>
				</el-col>
				<el-col :span="5" style="display: flex;">
					<i class="el-icon-refresh" @click="handleReload"></i>
					<div style="">
						<el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="searchData"></el-button>
						</el-input>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="wrapTbale">
			<el-row>
				<el-col :span="24">
					<el-table :data="tableData" border style="width: 100%" stripe :header-cell-style="{'background-color': '#FAFAFA','font-size': '16px','font-weight': 'bold','color' : '#66667d'}" v-loading="loading" element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading" element-loading-background="rgba(246, 246, 246, 0.8)">
						<el-table-column label="图片" width="150" align="center">
							<template slot-scope="scope">
								<img :src="scope.row.logo" alt="" width="120" height="60">
							</template>
						</el-table-column>
						<el-table-column prop="name" label="资源名称" width="150" align="center">
						</el-table-column>
						<el-table-column prop="platformTypeStr" label="平台" width="180" align="center">
						</el-table-column>
						<el-table-column prop="price" label="价格" sortable width="120" align="center">
						</el-table-column>
						<el-table-column prop="averageTime" label="平均出稿时间" width="180" align="center">
						</el-table-column>
						<el-table-column prop="authTypeStr" label="认证类型" width="180" align="center">
						</el-table-column>
						<el-table-column prop="fanNum" label="参考粉丝数" width="120" align="center">
						</el-table-column>
						<el-table-column prop="averageNum" label="参考阅读数" width="120" align="center">
						</el-table-column>
						<el-table-column prop="remarkDesc" label="备注" width="" align="center">
						</el-table-column>
						<el-table-column prop="operation" label="操作" align="center" width="240" fixed = "right">
							<template slot-scope="scope">
								<div class="operation">
									<span :class="scope.row.collect==1?'iconfont icon-xin':'iconfont icon-zan1'" @click="shopzimCollection(scope.row.id,scope.row.collect,scope.$index)"></span>
									<button class="operbtn"><router-link :to="'sourec01/'+ scope.row.id" target="_blank">查看</router-link></button>
									<button class="operbtn" @click="singleOrder(scope.row.id)">下单</button>
									<button class="operbtn" @click="addzimshopCart(scope.row.id,scope.$index)">加入购物车</button>
								</div>
							</template>

						</el-table-column>

					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[30, 50]" layout="prev, pager, next, jumper,total, sizes" :total="tableTotal">
					</el-pagination>
				</el-col>


			</el-row>
		</div>
	</div>

</template>

<script>
	import busTitleList from '../../components/v-business.vue'
	export default {
		components: {
			busTitleList
		},
		data() {
			return {
				articleList: [{
						id: 1,
						title: "地区",
						radio: "radio1",
						list: [{
								cityCode: "010",
								city: "北京市"
							}, {
								cityCode: "020",
								city: "上海市"
							}, {
								cityCode: "050",
								city: "广东省"
							}, {
								cityCode: "050090",
								city: "深圳市"
							}, {
								citycode: "040",
								city: "重庆市"
							}, {
								cityCode: "260",
								city: "山西省"
							}, {
								cityCode: "120",
								city: "贵州省"
							}, {
								cityCode: "290",
								city: "西藏自治区"
							}, {
								cityCode: "220",
								city: "内蒙古自治区"
							}, {
								cityCode: "240",
								city: "青海省"
							}, {
								cityCode: "100",
								city: "甘肃省"
							}, {
								cityCode: "270",
								city: "陕西省"
							}, {
								cityCode: "310",
								city: "云南省"
							}, {
								cityCode: "280",
								city: "四川省"
							},
							{
								cityCode: "130",
								city: "海南省"
							}, {
								cityCode: "180",
								city: "湖南省"
							}, {
								cityCode: "170",
								city: "湖北省"
							}, {
								cityCode: "150",
								city: "河南省"
							}, {
								cityCode: "250",
								city: "山东省"
							}, {
								cityCode: "200",
								city: "江西省"
							}, {
								cityCode: "090",
								city: "福建省"
							}, {
								cityCode: "080",
								city: "安徽省"
							}, {
								cityCode: "070",
								city: "浙江省"
							}, {
								cityCode: "060",
								city: "江苏省"
							}, {
								cityCode: "160",
								city: "黑龙江省"
							}, {
								cityCode: "190",
								city: "吉林省"
							}, {
								cityCode: "210",
								city: "辽宁省"
							}, {
								cityCode: "140",
								city: "河北省"
							}
						]
					},
					{
						id: 2,
						title: "平台",
						radio: "radio2",
						list: [ "百家号","今日头条","东方头条","搜狐网 ","新浪网","网易号","一点资讯" ,"uc头条","腾讯号","凤凰号","知乎号","豆瓣","简书" ,"东方财富号","中金在线号","趣头条","天天快报","其他" ]
					},
					{
						id: 3,
						title: "频道",
						radio: "radio3",
						list: ["新闻", "财经", "IT", "科技", "娱乐", "旅游", "教育", "房产", "家居", "汽车", "女性", "时尚", "美容", "母婴育儿", "健康", "艺术", "家电数码",
							"游戏动漫", "体育", "资讯", "生活", "食品", "文化环保", "公益", "法律", "门户", "报业", "区块链", "工业贸易"
						]
					},
					{
						id: 4,
						title: "出稿时间",
						radio: "radio5",
						list: ["小于1小时", "小于2小时", "小于12小时", "小于24小时", "小于24小时"]
					},
					{
						id: 5,
						title: "价格区间",
						radio: "radio4",
						list: ["小于50元", "50~100元", "100~200元", "200~500元", "500~1000元", "大于1000元", ]
					},
					
					{
						id: 6,
						title: "认证情况",
						radio: "radio6",
						list: ["个人认证","企业认证","一手认证","独家认证"]
					},
					{
						id: 7,
						title: "粉丝数量",
						radio: "radio7",
						list: ["小于1万","1-5万","5-10万","10-50万","50-100万","大于100万"]
					},
					{
						id: 8,
						title: "阅读数量",
						radio: "radio8",
						list: ["小于1万","1-5万","5-10万","大于10万"]
					},
					{
						id: 9,
						title: "特殊行业",
						radio: "radio9",
						list: ["P2P", "金融", "微商", "健康", "加盟", "留学", "无"]
					},

				],
				selectData: "媒体列表",
				// 模态框
				dialogTableVisible: false,
				// 我的购物车的数据列表
				checkAll: false,
				checkedCities: [],
				isIndeterminate: false,
				shopTableList: [],
				shopTotal:0,
				shopPrice:0,
				input5: '', //搜索的关键字
				// 表格显示的数据
				tableData: [],
				mediaParams:"",
				loading: false,
				currentPage: 1,
				pageSize:30,
				tableTotal: 0,
			}
		},
		methods: {
			//获取选中的数据
			getSelectRad(data) {
				// console.log(data)
				var sendData = {}
				for (var i = 0; i < data.length; i++) {
					switch (data[i].id) {
						case 1: //地区
							sendData.openCity = data[i].cityCode
							break;
						case 2: //平台
							sendData.integratedPortal = String(data[i].attrNum)
							break;
						case 3: //频道
							sendData.channelTypes = String(data[i].attrNum)
							break;
						case 4: //出稿时间
							sendData.publishTimeHour = data[i].attrNum
							break;
						case 5: //价格区间
							sendData.price = data[i].attrNum
							break;
						case 6: //认证情况
							sendData.authType = String(data[i].attrNum)
							break;
						case 7: //粉丝数量
							sendData.fanNum = String(data[i].attrNum)
							break;
						case 8: //阅读数量
							sendData.averageNum = String(data[i].attrNum)
							break;
						case 9: //特殊行业
							sendData.specialIndustrys = String(data[i].attrNum)
							break;
						default:
							break;
					}
				}
				switch (this.selectData) {
					case "媒体列表":
						console.log("我是媒体列表数据")
						delete sendData.productLabes
						break;
					case "热门推荐":
						sendData.productLabes = "3"
						console.log("我是热门推荐数据")
						break;
					case "收藏资源":
						sendData.collect = "0"
						console.log("我是收藏资源数据")
						break;
					default:
						break;
				}
				this.currentPage = 1
				this.pageSize = 30
				sendData.page = 1
				sendData.size = 30
				// console.log(this.selectData)
				this.mediaParams = sendData
				this.mediaQuerydata(sendData)
			},
			// 选中当前应加载哪个数据
			selectCheck(event) {
				switch (event) {
					case "媒体列表":
						var mediaParams = this.mediaParams
						delete mediaParams.productLabes
						delete mediaParams.collect
						this.mediaQuerydata(mediaParams)
						break;
					case "热门推荐":
						var hot = this.mediaParams
						delete hot.productLabes
						delete hot.collect
						hot.identity = 0
						hot.productLabes =3
						this.currentPage = 1
						this.mediaQuerydata(hot)
						break;
					case "收藏资源":
						var collect = this.mediaParams
						delete collect.productLabes
						collect.identity = 0
						collect.collect = 0
						console.log(collect)
						this.currentPage = 1
						this.mediaQuerydata(collect)
						break;
					default:
						break;
				}
			},
			// 刷新按钮
			handleReload() {
				this.mediaQuerydata("load")
				this.input5 = ""
			},
			// 查询数据
			searchData() {
				console.log(this.input5)
				var searchStr = this.mediaParams
				searchStr.name = this.input5
				this.mediaQuerydata(searchStr)
			},
			// 购物车全选中
			handleCheckAllChange(val) {
				var shopPrice = 0
				val?this.shopTotal = this.shopTableList.length:this.shopTotal=0
				if (this.checkAll) {
					// var shopPrice = this.shopPrice
					this.shopTableList.forEach(item => {
						this.checkedCities.push(item.id)
						shopPrice += item.orderCartPrice
					})
					this.shopPrice = shopPrice
				} else {
					this.checkedCities = []
					this.shopPrice = 0
				}
			},
			//购物车单选
			handleCheckedCitiesChange(value) {
				// console.log(value)
				this.shopTotal = this.checkedCities.length
				var price = 0;
				this.checkedCities.forEach(item => {	
					this.shopTableList.forEach(items=>{
						if(item == items.id){
							price += items.orderCartPrice
						}
					})
				})
				this.shopPrice = price
				if (this.checkedCities.length == this.shopTableList.length) {
					this.checkAll = true
				} else {
					this.checkAll = false
				}
			},
			//移除购物车
			delSelectShop(shopId,index) {
				var data = {id:shopId}
				this.$api.mediaMall.delzimShopCart(data).then((res)=>{
					console.log(res)
					var shopTableList = this.shopTableList
					if(res.status == 200){
						shopTableList.splice(index,1)
						this.$message({
							message: '移除成功',
							type: 'success',
							offset: 500,
							duration: 1000
						});
					}else{
						this.$message({
							message: '服务器繁忙',
							type: 'error',
							offset: 500,
							duration: 1000
						});
					}
				})
			},
			// 商品加入收藏
			shopzimCollection(shopId, collect, index) {
				// console.log(shopId,String(collect))
				collect == 0 ? collect = 1 : collect = 0
				console.log(shopId, String(collect))
				// var tableData = this.tableData
				this.$api.mediaMall.zimCollection({
					id: shopId,
					collect: collect
				}).then((res) => {
					if (res.status == 200) {
						if (collect == 0) {
							this.tableData[index].collect = 0
							this.$message({
								message: '成功收藏',
								type: 'success',
								offset: 500,
								duration: 1000
							});
						} else if (collect == 1) {
							this.tableData[index].collect = 1
							this.$message({
								message: '取消收藏',
								type: 'warning',
								offset: 500,
								duration: 1000
							});
						}
					}
				})
			},
			//商品加入购物车
			addzimshopCart(shopId,index) {
				var data = {id:shopId}
				this.$api.mediaMall.zimaddShopCart(data).then((res)=>{
					console.log(res)
					if(res.status == 200){
						if(res.data == "购物车已存在该资源"){
							this.$message({
								message: '已存在购物车',
								type: 'error',
								offset: 500,
							});
							return;
						}
						var data = {}
						data.id = this.tableData[index].id
						console.log(this.tableData[index])
						if(this.shopTableList != null){
							this.shopTableList.push(data)
						}else{
							this.shopTableList = data
						}
						console.log(this.shopTableList)
						this.$message({
							message: '加入成功',
							type: 'success',
							offset: 500,
						});
					}
					
				})
				
			},
			//商品下单
			singleOrder(id) {
				console.log(id)
				if (id == "null") {
					this.$message({
						message: '支付接口暂未提供',
						type: 'success',
						offset: 500,
					});
					console.log(this.checkedCities)
				} else {
					console.log(id)
					this.$message({
						message: '支付接口暂未提供',
						type: 'success',
						offset: 500,
					});
				}
			},
			// 分页
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage = val
				var mediaParams = this.mediaParams
				mediaParams.page = val
				this.mediaQuerydata(mediaParams)
			},
			// ======================================================查询数据方法=======================================================================================
			// 媒体列表数据查询
			mediaQuerydata(params) {
				// console.log(params)
				var data = ""
				if (params == undefined || params == "load") {
					data = {
						identity: "0",
						page:1,
						upUnderShelf:"1",
						size:this.pageSize
					}
					this.mediaParams = data
				} else {
					data = params
					data.size = this.pageSize
					data.upUnderShelf = "1"
					this.mediaParams = params
				}
				console.log(data)
				this.$api.mediaMall.zimArticle(data).then((res) => {
					console.log(res)
					if(res.status == 200){
						this.tableTotal = res.data.totalCount
						this.loading = true;
						setTimeout(()=>{
							params == "load"?this.selectData = "媒体列表" : ""
							this.tableData = res.data.data
							this.loading = false;
						},1000)
					}
				})
			},
			//购物车数据查询
			zimshopCartdata(){
				this.checkedCities = []
				this.checkAll = false
				this.shopPrice = 0
				this.shopTotal = 0
				this.$api.mediaMall.zimshopCart().then((res)=>{
					console.log(res)
					if(res.status == 200){
						this.shopTableList = res.data
					}
				})
			}
		},
		mounted() {
			this.zimshopCartdata()
			this.mediaQuerydata()
		},

	}
</script>

<style>
	.el-table .cell {
		width: 1000px;
	}

	#article {
		max-height: 775px;
		overflow-y: scroll;
		margin-bottom: 30px;
	}

	#article .iconfont {
		font-size: 26px;
	}

	#article .icon-gouwuchekong {
		line-height: 44px;
		margin-left: 40px;
		position: relative;
		cursor: pointer;
	}

	#article span.el-radio-button__inner {
		border: 0;
		padding: 5px 7px;
	}

	#article .el-radio-button:first-child .el-radio-button__inner {
		border: 0;
		border-radius: 0;
	}

	#article .el-radio-button__orig-radio:checked+.el-radio-button__inner {
		background: #ff6e19;
		box-shadow: none;
	}

	#article .el-radio-button:last-child .el-radio-button__inner {
		border-radius: 0;
	}

	#article .el-radio-button__inner:hover {
		background: #ff6e19 !important;
		color: #fff;
	}

	#article .wrapNav {
		padding: 3px;
		height: auto;
		background: #fff;
	}

	#article .chooseNav {
		background: #F6F6F6;
		padding: 10px;
		text-align: center;
		height: 100%;
	}

	#article .listNav {
		padding-left: 20px;
	}

	/* 数据列表开始 */
	#article .wrapDataList {
		margin-top: 5px;
		background: #fff;
		padding: 5px;
	}

	#article .topHeader .el-input {
		margin-top: 4px;
	}

	#article .topHeader .el-input__inner {
		height: 35px;
		line-height: 35px;
	}

	#article .el-icon-refresh {
		font-size: 25px;
		color: #ff6e19;
		padding: 0 10px;
		line-height: 44px;
		cursor: pointer;
	}

	#article .wrapDataList span.el-radio-button__inner {
		border: 0;
		padding: 15px 20px;
		background: #f2f2f2;
		margin: 0 5px;
	}

	#article .zimshopCartTotal {
		width: 20px;
		height: 20px;
		position: absolute;
		background: #ff6e19;
		top: 3px;
		left: 15px;
		border-radius: 50%;
	}

	#article .zimshopCartTotal b {
		color: #fff;
		line-height: 20px;
		font-size: 18px;
		position: absolute;
		left: 5px;
	}

	#article .wrapTbale .operation span {
		color: #FF6E19;
		font-size: 27px;
		position: relative;
		top: 5px;
		cursor: pointer;
	}

	#article .wrapTbale .operbtn {
		margin: 0 5px;
		padding: 2px 3px 0;
		cursor: pointer;
	}

	#article .wrapTbale .operation button:first-of-type {
		background: #fff;
		color: #555;
		border: 1px solid #c9c9c9;
	}

	#article .wrapTbale .operation button:not(:first-of-type) {
		background: #ff6e19;
		color: #fff;
	}

	#article .el-pagination {
		background: #fff;
		border: 1px solid #EBEEF5;
		padding: 5px 5px;
	}

	/* 模态框部分 */
	#shopShowModal {}

	.el-dialog__body {
		min-height: 500px;
	}

	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #FF6E19;
		border-color: #FF6E19;
	}

	.el-checkbox__inner:hover {
		border-color: #FF6E19;
	}

	.el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #FF6E19;
	}

	.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	#shopShowModal .bottom {
		padding: 20px 0;
	}

	#shopShowModal .bottom>div:first-child {
		border-top: 1px solid #e0e0e0;
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		padding: 20px 0;
	}

	#shopShowModal .bottom>div:first-child .checkAll,
	.total,
	.price {
		margin-left: 30px;
	}

	#shopShowModal .bottom>div:first-child .place {
		position: absolute;
		right: 30px;
		background: #ff6e19;
		color: #fff;
		padding: 2px 10px;
		cursor: pointer;
	}
</style>
